import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.5
import QtQuick.Controls.Styles 1.4
import Qt.labs.platform 1.0

Window {
    id: window
    width: 640
    height: 480
    visible: true
    title: qsTr("QML Image Viewer")

    // main column
    Column{
        id: layoutMain
        width: window.width
        height: window.height
        anchors.verticalCenterOffset: 0
        anchors.horizontalCenterOffset: 0
        anchors.centerIn: parent
        spacing: 10

        Rectangle {
            id: rectangleTitle
            x: 0
            y: 0
            width: window.width
            height: 60
            color: "#ffffff"

            Text {
                id: elementFolder
                width: 59
                text: qsTr("Folder:")
                verticalAlignment: Text.AlignVCenter
                font.pixelSize: 14

                anchors{
                    top: parent.top
                    topMargin: 5
                    left: parent.left
                    leftMargin: 5
                    bottom: parent.bottom
                    bottomMargin: 5
                }
            }

            TextInput {
                id: inputBoxInputDefault
                x: 0
                y: 0
                text: folderDialogDefault.folder
                height: rectangleTitle.height
                color: "#707070"
                font.pixelSize: 16
                activeFocusOnTab: true
                selectByMouse: true
                selectedTextColor: "white"
                selectionColor: "#4A6DBC"
                verticalAlignment: TextInput.AlignVCenter
                horizontalAlignment: TextInput.AlignLeft
                leftPadding: 3
                rightPadding: 3
                clip: true
                anchors{
                    top: parent.top
                    topMargin: 5
                    left: elementFolder.right
                    leftMargin: 5
                    right: parent.right
                    rightMargin: 5
                    bottom: parent.bottom
                    bottomMargin: 5
                }
            }


            Button{
                id:btnChooseDirDefault
                width: 70

                Image {
                        fillMode: Image.PreserveAspectCrop
                        anchors.fill: parent
                        source: "qrc:/image/openFolder.svg"
                        }

                background: Rectangle {
                        border.width: 0
                }

                anchors{
                    top: parent.top
                    topMargin: 5
                    right: parent.right
                    rightMargin: 5
                    bottom: parent.bottom
                    bottomMargin: 5
                }


                onClicked: {
                    console.log("Open Directory clicked")
                    folderDialogDefault.open();
                }
            }
        }

        Rectangle{
            id: rectangleMain
            x: 0
            y: 0
            width: window.width
            color: "#ffffff"
            anchors{
                top: rectangleTitle.bottom
                bottom: textInputFile.top
                right: parent.right
                rightMargin:  0
            }
            Image {
                id:image
                focus: true
                source: LocalDirIterator.currentFilename
                anchors{
                    top: parent.top
                    left: parent.left
                    right: parent.right
                    bottom: parent.bottom
                    bottomMargin: 5
                }

                fillMode: Image.PreserveAspectFit

                Keys.onPressed: {
                    switch (event.key) {
                    case Qt.Key_N:
                        LocalDirIterator.nextImage()
                        break
                    case Qt.Key_P:
                        LocalDirIterator.previousImage()
                        break
                    case Qt.Key_Q:
                        Qt.exit(0)
                        break
                    }
                }
            }


            Button{
                id:btnPrevious
                width: btnNext.width
                height: btnNext.height
                anchors.left: parent.left
                anchors.leftMargin: 10
                anchors.verticalCenter: parent.verticalCenter
                opacity: 0.8

                Image{
                    anchors.leftMargin: 8
                    anchors.fill: parent
                    source: "qrc:/image/moveprevious.svg"
                }

                background: Rectangle {
                    color: "transparent"
                    radius: 8
                    border.color:"black"
                    border.width: 0
                }

                //connect
                onClicked: {
                    console.log("click button Previous.")
                    LocalDirIterator.onPreviousClicked();
                }
            }

            Button{
                id:btnNext
                x: 570
                width: 60
                height: 98

                Image{
                    width: 60
                    anchors.rightMargin: 8
                    anchors.fill: parent
                    source: "qrc:/image/movenext.svg"
                }

                background: Rectangle {
                    color: "transparent"
                    border.width: 0
                }

                opacity: 0.8
                transformOrigin: Item.Right
                anchors{
                    verticalCenter: parent.verticalCenter
                    right: parent.right
                    rightMargin:  10
                }

                //connect
                onClicked: {
                    console.log("click button Next.");
                    LocalDirIterator.onNextClicked();
                }
            }
        }

        TextInput {
            id: textInputFile
            height: 15
            text: LocalDirIterator.currentFilename
            anchors{
                left: parent.left
                leftMargin: 5
                right: parent.right
                rightMargin: 5
                bottom: parent.bottom
                bottomMargin: 3
            }
            font.pixelSize: 12
        }

    }

    /*
     * Open Folder Dialog
     */
    FolderDialog {
        id: folderDialogDefault
        acceptLabel: qsTr("OK")
        rejectLabel: qsTr("Cancel")
        folder: LocalDirIterator.currentFolder
        options: FolderDialog.ShowDirsOnly
        onAccepted: {
        }
        onFolderChanged: {
            LocalDirIterator.onChangeFolder(folder);
        }
    }
}
